<template>
    <div>
      <div style="border: 1px solid #ccc">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 300px; overflow-y: hidden"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
          @onBeforeUpload="onBeforeUpload"
          @onSuccess="onSuccess"
          @onError="onError"
        />
      </div>
      <div>
        <button @click="getContent">获取内容</button>
        <button @click="setContent">设置内容</button>
      </div>
    </div>
  </template>
  
  <script>
  import Vue from "vue";
  import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
  import "@wangeditor/editor/dist/css/style.css";
  export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
      return {
        editor: null,
        html: "",
        toolbarConfig: {},
        editorConfig: {
          placeholder: "请输入内容...",
          MENU_CONF: {
            uploadImage: {
              server: this.$API + "uploadPicture",
              fieldName: "file",
              maxFileSize: 2 * 1024 * 1024,
              maxNumberOfFiles: 3,
              allowedFileTypes: ["image/*"],
              customInsert: (res, insertFn) => {
                // res 即服务端的返回结果
                let url = this.$API + res;
                // 从 res 中找到 url alt href ，然后插入图片
                insertFn(url);
              },
            },
          },
        },
        mode: "default", // or 'simple'
      };
    },
    methods: {
      getContent() {
        console.log(this.editor.getHtml());
        console.log(this.editor.getText());
        console.log(this.html);
      },
      setContent() {
        this.editor.setHtml("<p>hello<b>world</b></p>");
      },
      onCreated(editor) {
        this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      },
      onBeforeUpload(file) {
        return file;
      },
  
      onSuccess(file, res) {
        console.log("上传成功");
        console.log(`${file.name} 上传成功`, res);
      },
      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {
        console.log(`${file.name} 上传出错`, err, res);
      },
    },
    beforeDestroy() {
      const editor = this.editor;
      if (editor == null) return;
      editor.destroy(); // 组件销毁时，及时销毁编辑器
    },
  });
  </script>
  
  <style lang="scss" scoped>
  </style>